<template>
	<div>
		<div class="left-side">
			<ul>
	          <router-link v-for="item in products" :to="{ path: item.path }" tag="li" active-class="active">
	            {{ item.name }}
	          </router-link>
        	</ul>
		</div>
		
		<div class="right-side">
			<img src="http://m2.banggo.com/sources/cms/999999/420wuxianhu13.jpg" class="imgTop">
			<div class="boy">上装</div>
			<div class="T-shirt">
				<img src="http://pic3.banggo.com/sources/images/goods/MC/515058/515058_00--w_160_h_160.jpg">
				<div>T恤</div>
			</div>
			<div class="T-shirt">
				<img src="http://pic3.banggo.com/sources/images/goods/MC/515058/515058_00--w_160_h_160.jpg">
				<div>T恤</div>
			</div>
			<div class="T-shirt">
				<img src="http://pic3.banggo.com/sources/images/goods/MC/515058/515058_00--w_160_h_160.jpg">
				<div>T恤</div>
			</div>
			<div style="clear:both"></div>
			<div class="boy">上装</div>
			<div class="T-shirt">
				<img src="http://pic3.banggo.com/sources/images/goods/MC/515058/515058_00--w_160_h_160.jpg">
				<div>T恤</div>
			</div>
			<div class="T-shirt">
				<img src="http://pic3.banggo.com/sources/images/goods/MC/515058/515058_00--w_160_h_160.jpg">
				<div>T恤</div>
			</div>
			<div class="T-shirt">
				<img src="http://pic3.banggo.com/sources/images/goods/MC/515058/515058_00--w_160_h_160.jpg">
				<div>T恤</div>
			</div>
			<div style="clear:both"></div>
			<div class="boy">上装</div>
			<div class="T-shirt">
				<img src="http://pic3.banggo.com/sources/images/goods/MC/515058/515058_00--w_160_h_160.jpg">
				<div>T恤</div>
			</div>
			<div class="T-shirt">
				<img src="http://pic3.banggo.com/sources/images/goods/MC/515058/515058_00--w_160_h_160.jpg">
				<div>T恤</div>
			</div>
			<div class="T-shirt">
				<img src="http://pic3.banggo.com/sources/images/goods/MC/515058/515058_00--w_160_h_160.jpg">
				<div>T恤</div>
			</div>
		</div>		
    </div>           
</template>

<script>
export default {
  data () {
    return {
      products: [
        {
          name: '热门',
          path: '/category/hot',          
          active: false
        },
        {
          name: '男装',
          path: '/category/men',
          active: false
        },
        {
          name: '女装',
          path: '/category/women',
          active: false
        },
        {
          name: '儿童',
          path: '/category/children',
          active: false
        },
        {
          name: '鞋履',
          path: '/category/shoes',
          active: false
        },
        {
          name: '箱包',
          path: '/category/bags',
          active: false
        },
        {
          name: '配饰',
          path: '/category/accessory',
          active: false
        },
        {
          name: '美妆生活',
          path: '/category/makeup',
          active: false
        }
      ],
      
    }
  }  
}
</script>
<style>
	article, aside, blockquote, body, button, code, dd, details, div, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, input, legend, li, menu, nav, ol, p, pre, section, td, textarea, th, ul {
	    margin: 0;
	    padding: 0;
	}	

	li, ol, ul {
    	list-style: none;
	}

	a, ins {
    	text-decoration: none;
	}

	body {
		font-size: 0.4rem!important;
	}

	.left-side {
		float:left;
		width:25%;
		height:422px;	
	}



	.left-side ul li {
		height:52.75px;
		width:95%;
		border:1px solid #eee;
		line-height:52.75px;
		padding-left:5%;
	}

	.left-side li.active {		
		background-color: #fff;
		color:red;
		border-right:none;
	}

	.right-side {
		float: left;
		width:74%;
		height:622.16px;
		overflow:scroll;		
	}

	.right-side .imgTop {
		margin-top:10px;
		margin-left:10px;
		width:90%;
		height:97.03px;
	}

	.right-side .boy {
		border-left: 2px solid #f84646;
		padding-left: 20px;
		margin-left: 10px;
	}

	.right-side .T-shirt {
		width:28%;
		height:125.97px;
		margin-left:10px;
		margin-top:10px;
		float:left;
		text-align:center;
	}

	.right-side .T-shirt img {
		width:100%;
		height:87.97px;
	}



</style>



